<template>
  <div>
    <v-contextmenu ref="contextmenu">
      <v-contextmenu-item @click="goDevM">卡片展示</v-contextmenu-item>
      <v-contextmenu-item>轮播展示</v-contextmenu-item>
      <v-contextmenu-item>锁定</v-contextmenu-item>
    </v-contextmenu>
    <a-card v-contextmenu:contextmenu>
      <a-table
        :loading="subUserStore.isSubUserTableLoading"
        :columns="subUserTableColumns"
        :data="subUserStore.subUserList"
        :bordered="{ cell: true }"
      >
        <template #action="{ rowIndex }">
          <a-button type="primary" @click="relevanceDevClick(subUserStore.subUserList[rowIndex])">关联设备</a-button>
        </template>
      </a-table>
      <!-- <a-button @click="goDevM()">刷新</a-button> -->
    </a-card>

    <!-- 关联设备的弹窗 -->
    <!-- <a-modal
      v-model:visible="isShowRelevanceDevModal"
      @ok="relevanceDevModalOkClick"
      @cancel="relevanceDevModalCancelClick"
      class="relevance_dev_modal"
    >
      <template #title> 关联设备 </template>
      <div class="relevance_dev_box">
        <div class="dev_list_box"></div>
        <div class="subUser_dev_list_box"></div>
      </div>
    </a-modal> -->
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
export default defineComponent({
  name: 'Table'
})
</script>
<script lang="ts" setup>
// 引入
import ContextMenu from '@arco-materials/context-menu'
import type { subUserType, subUserRelevanceDevListType } from '../type.ts'
import { selectDevListBySubUserApi } from '@/apis/subUser/index.ts'
import { useRouter } from 'vue-router'
import { useSubUserStore } from '@/store'
const router = useRouter()
const subUserStore = useSubUserStore()

// // 显示关联设备弹窗的标识
// const isShowRelevanceDevModal = ref(false)

// // 关联设备弹窗的确定点击事件
// const relevanceDevModalOkClick = () => {
//   console.log('确定')
// }

// // 关联设备弹窗的取消点击事件
// const relevanceDevModalCancelClick = () => {
//   console.log('取消')
// }

// 表格关联设备点击事件
const relevanceDevClick = (row: subUserType) => {
  subUserStore.currentSubUserInfo = row
  router.push({
    path: '/subUser/dev'
  })
  // isShowRelevanceDevModal.value = true
  // getSubUserRelevanceDevFunc()
  // console.log(currentSubUserInfo.value)
}

// 平台子用户表格字段数据
const subUserTableColumns = ref([
  {
    title: '用户名',
    align: 'center',
    dataIndex: 'platFormSubUserName',
    width: '100'
  },
  {
    title: '用户邮箱',
    align: 'center',
    dataIndex: 'platFormSubUserEmail',
    width: '180'
  },
  {
    title: '微信ID',
    align: 'center',
    dataIndex: 'platFormSubUserWeichatId',
    width: '180'
  },
  {
    title: '公司名称',
    align: 'center',
    dataIndex: 'platFormSubUserCompany',
    width: '200'
  },

  {
    title: '创建时间',
    align: 'center',
    dataIndex: 'platFormSubUserCreateTime',
    width: '180'
  },
  {
    title: '最近登录时间',
    align: 'center',
    dataIndex: 'platFormSubUserLastLogin',
    width: '180'
  },

  {
    title: '用户备注',
    align: 'center',
    dataIndex: 'platFormSubUserDesc',
    width: '180'
  },
  {
    title: '所在地',
    align: 'center',
    dataIndex: 'mainArea',
    width: '150'
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '150',
    align: 'center',
    slotName: 'action'
  }
])

const goDevM = () => {
  router.push({
    path: '/subUser/dev'
  })
}

// 初始化
onMounted(() => {
  subUserStore.getSubUserListFunc()
})
</script>

<style lang="scss" scoped>
// .relevance_dev_box {
//   width: 900px;
//   height: 400px;
// }
</style>
